{% extends 'index.html' %}
{% block title %}注册{% endblock %}
{% block content %}
<div class="jumbotron" style="height: 800px">
    <div class="container">
        <div class="row">
            <p style="font-size: 30px;font-weight: bold;margin: 30px 0 ">注册</p>
            <form role="form" method="POST" action="/register">{% csrf_token %}
                <div class="form-group">
                    <label for="username1">用户名</label>
                    <input type="text" class="form-control" id="username1" name="username1" placeholder="请输入用户名"><span style="color: red">{{ form.errors.username1.0 }}</span>
                </div>
                <div class="form-group">
                    <label for="email1">邮箱</label>
                    <input type="email" class="form-control" id="email1" name="email1" placeholder="请输入邮箱"><div style="color:red">{{ form.errors.email1.0 }}</div>
                </div>
                <div class="form-group">
                    <label for="password1">密码</label>
                    <input type="password" class="form-control" id="password1" name="password1" placeholder="请输入密码"><p style="color:red">{{ form.errors.password1.0 }}</p>
                </div>
                <div class="form-group">
                    <label for="confirm_password1">确认密码</label>
                    <input type="password" class="form-control" id="confirm_password1" name="password2" placeholder="请重新输入密码"><p style="color:red">{{ form.errors.password2.0 }}</p>
                </div>
                <div class="form-group">
                    <label for="check_code1">验证码</label>
                    <div class="row">
                        <div class="col-xs-7">
                            <input type="password" class="form-control" id="check_code1" name="check_code1" placeholder="请输入验证码"><p style="color:red">{{ form.errors.check_code1.0 }}</p>
                        </div>
                        <div class="col-xs-5">
                            <img src="/check_code" onclick="changeCheckCode(this);">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3">
                        <input type="submit" class="btn btn-default" value="确定"/>
                    </div>
                    <div class="col-xs-6" style="padding-left: 0;">
                        <div class="alert alert-danger hide">
                            <span style="padding: 0 5px 0 5px;display: inline-block;font-size: 14px">
                                <i class="fa fa-minus-circle" aria-hidden="true"></i>
                            </span>
                            <span id="error_msg" style="font-size: 12px;"></span>
                        </div>
                    </div>
                    <div class="col-xs-3" style="padding-right: 0;">
                        <a  href="/login.html" class="btn btn-default">登录</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}